<template>
	<view class="h-[650rpx] mt-50">
		<view>
			<uni-steps class="m-15 mb-20" :options="list" active-icon="medal" :active="active" />

			<uni-forms ref="resetPwdFormRef" :model="resetPwdForm" :rules="resetPwdRules" class="m-15"
				@submit.prevent>
				<uni-forms-item required name="username" v-if="active == 0">
					<uni-easyinput v-model="resetPwdForm.username" type="text" size="default" auto-complete="off"
						:placeholder="$lang('账号')">
					</uni-easyinput>
				</uni-forms-item>
				<view v-if="active == 1">
					<uni-forms-item required name="code">
						<uni-easyinput v-model="resetPwdForm.code" type="number" auto-complete="off"
							:placeholder="$lang('请输入welink验证码')">
							<template #right>
								<button @click="handleSendCode" type="primary"
									v-if="!showCounddown">{{ $lang('获取验证码') }}</button>
								<uni-countdown :minute="countdownValue" :show-day="false" @timeup="handleFinish" v-else />
							</template>
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required name="password">
						<uni-easyinput v-model="resetPwdForm.password" type="password" size="default"
							auto-complete="off" :placeholder="$lang('密码')">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required name="confirmPassword">
						<uni-easyinput v-model="resetPwdForm.confirmPassword" type="password" size="default"
							auto-complete="off" :placeholder="$lang('确认密码')">
						</uni-easyinput>
					</uni-forms-item>
				</view>
			</uni-forms>
			<view :class="active==0?'columns-1':'columns-2'">
				<button v-if="active > 0" class="h-[40px] ml-5 leading-[40px] text-[36rpx] bg-blue-600 text-white rounded-[90px]"
					@click="active--">{{ $lang('上一步') }}</button>
				<button class="h-[40px] leading-[40px] mr-5 text-[36rpx] bg-blue-600 text-white rounded-[90px]" @click="next">{{ $lang('下一步') }}</button>
			</view>
		</view>
		<view class="text-center mt-10">
			<view class="text-blue-400" @click="handleTab('/pages/login')">{{ $lang('使用已有账户登录') }}</view>
		</view>
	</view>
</template>
<script setup>
	import {
		checkUserName,
		resetPassWord
	} from '@/api/login'
	const {
		proxy
	} = getCurrentInstance()
	const active = ref(0)
	const globalConfig = getApp().globalData.config
	const resetPwdForm = reactive({
		username: '',
		password: '',
		confirmPassword: '',
		code: '',
		uuid: ''
	})
	const list = ref([{
		title: proxy.$lang('输入工号')
	}, {
		title: proxy.$lang('重置密码')
	}, {
		title: proxy.$lang('完成')
	}])
	const showCounddown = ref(false)
	const countdownValue = ref(0)
	const loading = ref(false)
	const equalToPassword = (rule, value, callback) => {
		if (resetPwdForm.password !== value) {
			callback(new Error(proxy.$lang('两次输入的密码不一致')))
		} else {
			callback()
		}
	}
	const resetPwdRules = reactive({
		username: {
			rules: [{
				required: true,
				errorMessage: proxy.$lang('请输入您的账号'),
			}, {
				minLength: 2,
				maxLength: 20,
				errorMessage: proxy.$lang('用户账号长度必须介于 2 和 20 之间'),
				validateTrigger: 'blur'
			}]
		},
		password: {
			rules: [{
					required: true,
					validateTrigger: 'blur',
					errorMessage: proxy.$lang('请输入您的密码')
				},
				{
					minLength: 5,
					maxLength: 20,
					errorMessage: proxy.$lang('用户密码长度必须介于 6 和 20 之间'),
					validateTrigger: 'blur'
				}
			]
		},
		confirmPassword: {
			rules: [{
					required: true,
					validateTrigger: 'blur',
					errorMessage: proxy.$lang('请再次输入您的密码')
				},
				{
					required: true,
					validator: equalToPassword,
					validateTrigger: 'blur'
				}
			]
		},
		code: {
			rules: [{
				required: true,
				validateTrigger: 'change',
				errorMessage: proxy.$lang('请输入验证码')
			}]
		}
	})
	// 用户跳转
	function handleTab(path) {
		proxy.$tab.redirectTo(path)
	}
	function handleFinish() {
		showCounddown.value = false
	}
	const next = () => {
		proxy.$refs['resetPwdFormRef'].validate().then(res => {
			switch (active.value) {
				case 0:
					checkUserName(resetPwdForm.username).then((res) => {
						if (res.code == 200) {
							active.value++
							showCounddown.value = true
							countdownValue.value = 10
						} else {
							proxy.$modal.msgError(proxy.$lang('账号不存在，请联系管理员!'))
						}
					})
					break
				case 1:
					resetPassWord(resetPwdForm).then((res) => {
						if (res.code == 200) {
							active.value++
							proxy.$modal.msgSuccess(proxy.$lang('重置成功，3秒后返回登录界面!'))
							setTimeout(() => {
								proxy.$tab.reLaunch('/pages/login')
							}, 3000)
						} else {
							proxy.$modal.msgError(res.msg)
						}
					})
					break
				default:
					if (active.value++ > 2) {
						proxy.$tab.reLaunch('/pages/login')
					}
					break
			}
		})
	}

	function handleSendCode() {
		checkUserName(resetPwdForm.username)
			.then((res) => {
				if (res.code == 200) {
					showCounddown.value = true
					countdownValue.value =10
				}
			})
			.catch((err) => {
				console.log(err)
				proxy.$modal.msgError(err.msg)
			})
	}

</script>
<style lang="scss">
	page {
	  background-color: #ffffff;
	}
	.loading {
		text-align: center;
		color: #ccc;
		padding: 10px;
	}
</style>